<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>仓库系统-卡片视图</title>
	<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
	<link rel="stylesheet" href="css/all.min.css">
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        body {
			background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #e6e6e6;
            min-height: 100vh;
            font-family: Arial, sans-serif;
            margin: 20px;
        }
		/* 全屏控制按钮样式 */
		.view-control {
			display: flex;
		}
		.view-control i {
			padding-left: 15px;
			color: #666;
			cursor: pointer;
		}
		.view-control i.active {
			color: #2196F3;
		}
		.view-control i:hover {
			transform: translateY(-2px);
		}
		
		.screen-control {
			margin-left: auto; /* 最右侧 */
			padding-left: 15px;
		}

		.fullscreen-toggle {
			color: #90e0ef;
			cursor: pointer;
			font-size: 18px;
			transition: all 0.3s;
		}

		.fullscreen-toggle:hover {
			color: #00b4d8;
			transform: scale(1.1);
		}

		/* 全屏状态下的样式 */
		:fullscreen .filter,
		:fullscreen .summary-container {
			background-color: rgba(0,0,0,0.8);
			padding: 15px;
		}

		:-webkit-full-screen .filter,
		:-webkit-full-screen .summary-container {
			background-color: rgba(0,0,0,0.8);
			padding: 15px;
		}
		
		/* 统计区域样式 */
        .summary-container {
            padding: 2px;
            margin-bottom: 20px;
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            gap: 10px;
        }
		.storage-selector {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        #storageSelect {
            background: transparent;
            border: none;
            color: #90e0ef;
            font-size: 20px;
            font-weight: bold;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 25px;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390e0ef'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right center;
        }
        .summary-stats {
            display: flex;
            font-size: 16px;
            font-weight: bold;
            color: #e6e6e6;
			height: 16px;
        }
        .progress-bar {
            flex: 1;
            height: 20px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 7px;
            overflow: hidden;
            position: relative;
            max-width: 400px;
        }
        .progress-fill {
            height: 100%;
            background: #2a9d8f;
            width: 20%;
            border-radius: 7px;
            transition: width 0.5s ease;
            position: relative;
        }
        .progress-fill-80 {
            background: #e7b151;
        }
        .progress-fill-100 {
            background: #e76f51;
        }
        .progress-text {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #e6e6e6;
            font-size: 14px;
        }
		
		/* 过滤区域样式 */
        .filter {
            padding: 5px 5px 5px 10px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
        }
        .view-switcher {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .view-btn {
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .view-btn.active {
            border-color: #00b4d8 !important;
            background-color: rgba(0, 180, 216, 0.2) !important;
        }
        .view-btn i {
            font-size: 18px;
            color: #666;
        }
        .view-btn.active i {
            color: #2196F3;
        }
		.view-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		}
		
		#filterContainer select {
            background: transparent;
            border: none;
            color: #fff;
            padding: 8px 25px 8px 10px;
            font-size: 16px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 12px;
        }
        #filterContainer select option {
            background: #16213e;
            color: #fff;
        }
		/* 搜索相关样式 */
		.search-container {
			position: relative;
			display: flex;
			align-items: center;
			gap: 8px;
			margin-left: auto;
		}
		.search-toggle {
			cursor: pointer;
			color: #90e0ef;
			transition: all 0.3s;
		}
		.search-box {
			width: 0;
			opacity: 0;
			transition: all 0.3s;
			background: rgba(255,255,255,0.1);
			border: 1px solid #00b4d8;
			border-radius: 12px;
			padding: 4px 10px;
			color: #fff;
		}
		.search-box.active {
			width: 160px;
			opacity: 1;
		}
		.highlight-match {
			animation: glow 1s infinite alternate;
			position: relative;
			z-index: 2;
		}
		@keyframes glow {
			from {
				box-shadow: 0 0 5px #e76f51, 0 0 10px #e76f51;
			}
			to {
				box-shadow: 0 0 15px #fff, 0 0 20px #fff;
			}
		}
		
		/* 内容区样式 */
		.view-title {
			margin:30px 0px 5px;0px;
			color:#fff;
			font-weight: bold;
		}
		.view-title .fas {
			cursor: pointer;
			margin-right: 8px;
			transition: transform 0.3s;
		}
		
        .view-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .rack-group {
            display: flex;
            gap: 15px;
            padding: 3px;
			align-items: center;
            border: 0px solid #ddd;
        }
        .group-title {
			white-space: nowrap;
            color: #90e0ef;
            text-align: center;
			width: 30px;
			flex-shrink: 0;
        }

        .row {
            display: flex;
            gap: 1px;
            justify-content: center;
        }
        .rack {
            width: 170px;
            height: 70px;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
            padding: 3px;
            font-size: 14px;
            position: relative;
        }
		.rack.exists {background-color: rgba(255, 255, 255, 0.2); } /* 该位置存在库位 */
        .rack.free { background-color: #2a9d8f; } /* 正常 */
        .rack.occupied { background-color: #e76f51; } /* 禁用 */
		
		.rack .goods-icon {
            padding-left:10px;
            opacity: 1;
			font-size: 16px;
        }
		.goods-icon.stored {
			color: #90e0ef;
		}
		.goods-icon.storing {
			color: #e6e6e6;
		}
		
		.runstate-icon-totime {
			color: #e7b151;
		}
		.runstate-icon-ontime {
			color: #e76f51;
		}
		.runstate-icon-overtime {
			color: #f22;
		}
		
		.occupied .goods-icon {
			color: #fff; /* 占用状态白色 */
		}
		
	  /* 自定义提示框 */
	  .custom-tooltip:hover .tooltip-content-opt {
		display: flex;
	  }
	  .tooltip-content-opt {
		display: none;
	  }
	  .custom-tooltip {
		width: 160px;
		background: white;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		border-radius: 4px;
		padding: 5px;
		font-size: 12px;
	  }
	  .tooltip-content {
		display: flex;
		z-index: 3;
	  }
	  .tooltip-column {
		flex: 1;
		padding: 0 5px;
	  }
	  .tooltip-divider {
		width: 1px;
		background: #eee;
		margin: 0 2px;
	  }
	  .tooltip-title {
		font-weight: bold;
		margin-bottom: 6px;
		color: #333;
	  }
	  .tooltip-item {
		margin-bottom: 3px;
		color: #666;
	  }
	  
		
		/* 移动端适配 */
		@media (max-width: 768px) {
			.summary-container {
				flex-wrap: wrap;
			}
			.storage-selector {
				order: 1;
				width: 100%;
			}
		}
		@media (max-width: 480px) {
			.view-btn span {
				display: none;
			}
			.view-btn i {
				font-size: 18px;
			}
		}
    </style>
</head>
<body>	
	<div class="summary-container">
        <div class="storage-selector">
            <select id="storageSelect">
                <option value="D">国内存储区</option>
                <option value="I">国际存储区</option>
            </select>
        </div>
        <div class="progress-bar">
            <div class="progress-fill" style="width: 20%">
                <div class="progress-text">20%</div>
            </div>
        </div>
        <div class="summary-stats"></div>
	
		<div class="view-control">
			<i title="列表视图" class="fa-solid fa-th"></i>
			<i title="卡片视图" class="fa fa-image active"></i>
			<a href="wms-2d.html"><i title="侧/俯视图" class="fa-solid fa-list"></i></a>
			<a href="wms-3d.html"><i title="三维视图" class="fas fa-cube" click="javascript"></i></a>
		</div>
		<div class="screen-control" id="fullscreen-component">
			<i class="fas fa-expand fullscreen-toggle" title="进入全屏"></i>
		</div>
    </div>
	
    <div class="filter">
        <div class="view-switcher">
            <div class="view-btn" data-mode="layer">
                <i title="按层查看(俯视图)" class="fa-solid fa-layer-group"></i>
            </div>
            <div class="view-btn active" data-mode="row">
                <i title="按排查看(侧视图)" class="fa-solid fa-clone"></i>
            </div>
        </div>
        <div id="filterContainer"></div>
		<div class="search-container">
			<input type="text" class="search-box" placeholder="输入货物编号,按回车键">
			<i class="fas fa-search search-toggle"></i>
		</div>
    </div>

    <div id="warehouseDisplay"></div>
	
    <script>
		// 统计数据
		const summary = {
            name: "国内存储区",
            total: 968,
            used: 868
        };
		// 库存数据
        const goodsData = [
            {
                areaNo: '国内存储区',
                spaceNo: '2-1-1',
                goodsNo: '8932489123',
                goodsType: 'pallet',
                state: 'storing'
            },
            {
                areaNo: '国内存储区',
                spaceNo: '3-2-1',
                goodsNo: '8932489234',
                goodsType: 'bag',
                state: 'stored'
            },
            {
                areaNo: '国内存储区',
                spaceNo: '5-3-1',
                goodsNo: '8932489245',
                goodsType: 'bag',
                state: 'releasing'
            },
            {
                areaNo: '国内存储区',
                spaceNo: '4-2-2',
                goodsNo: '8932489311',
                goodsType: 'bag',
                state: 'storing'
            }
        ];
		// 库位状态
        const warehouseStates = [
            { areaNo: '国内存储区', spaceNo: '1-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '2-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '3-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '4-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '5-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '6-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '7-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '8-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '9-1-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '10-1-1', deviceState: 'Maintenance' },
            { areaNo: '国内存储区', spaceNo: '1-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '2-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '3-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '4-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '5-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '6-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '7-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '8-2-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '10-2-1', deviceState: 'Failure' },
            { areaNo: '国内存储区', spaceNo: '1-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '2-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '3-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '4-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '5-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '6-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '7-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '8-3-1', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '10-3-1', deviceState: 'Releasing' },
            { areaNo: '国内存储区', spaceNo: '1-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '2-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '3-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '4-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '5-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '6-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '7-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '8-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '9-1-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '1-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '2-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '3-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '4-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '5-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '6-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '7-2-2', deviceState: 'Normal' },
            { areaNo: '国内存储区', spaceNo: '8-2-2', deviceState: 'Normal' }
        ];
		// 库位数据
        const warehouses = [
            { areaNo: '国内存储区', coordX: '1', coordY: '1', coordZ: '1', spaceNo: '1-1-1', state: 1 ,usedTimes: 51 },
            { areaNo: '国内存储区', coordX: '2', coordY: '1', coordZ: '1', spaceNo: '2-1-1', state: 1 ,usedTimes: 52},
            { areaNo: '国内存储区', coordX: '3', coordY: '1', coordZ: '1', spaceNo: '3-1-1', state: 1 ,usedTimes: 53},
            { areaNo: '国内存储区', coordX: '4', coordY: '1', coordZ: '1', spaceNo: '4-1-1', state: 1 ,usedTimes: 54},
            { areaNo: '国内存储区', coordX: '5', coordY: '1', coordZ: '1', spaceNo: '5-1-1', state: 1 ,usedTimes: 55},
            { areaNo: '国内存储区', coordX: '6', coordY: '1', coordZ: '1', spaceNo: '6-1-1', state: 1 ,usedTimes: 56},
            { areaNo: '国内存储区', coordX: '7', coordY: '1', coordZ: '1', spaceNo: '7-1-1', state: 1 ,usedTimes: 57},
            { areaNo: '国内存储区', coordX: '8', coordY: '1', coordZ: '1', spaceNo: '8-1-1', state: 1 ,usedTimes: 58},
            { areaNo: '国内存储区', coordX: '9', coordY: '1', coordZ: '1', spaceNo: '9-1-1', state: 1 ,usedTimes: 59},
            { areaNo: '国内存储区', coordX: '10', coordY: '1', coordZ: '1', spaceNo: '10-1-1',state: 1,usedTimes: 50 },
            { areaNo: '国内存储区', coordX: '1', coordY: '2', coordZ: '1', spaceNo: '1-2-1', state: 1 ,usedTimes: 91},
            { areaNo: '国内存储区', coordX: '2', coordY: '2', coordZ: '1', spaceNo: '2-2-1', state: 1 ,usedTimes: 92},
            { areaNo: '国内存储区', coordX: '3', coordY: '2', coordZ: '1', spaceNo: '3-2-1', state: 1 ,usedTimes: 93},
            { areaNo: '国内存储区', coordX: '4', coordY: '2', coordZ: '1', spaceNo: '4-2-1', state: 1 ,usedTimes: 94},
            { areaNo: '国内存储区', coordX: '5', coordY: '2', coordZ: '1', spaceNo: '5-2-1', state: 1 ,usedTimes: 95},
            { areaNo: '国内存储区', coordX: '6', coordY: '2', coordZ: '1', spaceNo: '6-2-1', state: 1 ,usedTimes: 96},
            { areaNo: '国内存储区', coordX: '7', coordY: '2', coordZ: '1', spaceNo: '7-2-1', state: 1 ,usedTimes: 97},
            { areaNo: '国内存储区', coordX: '8', coordY: '2', coordZ: '1', spaceNo: '8-2-1', state: 1 ,usedTimes: 98},
            { areaNo: '国内存储区', coordX: '10', coordY: '2', coordZ: '1', spaceNo: '10-2-1',state: 1,usedTimes: 99 },
            { areaNo: '国内存储区', coordX: '1', coordY: '3', coordZ: '1', spaceNo: '1-3-1', state: 1 ,usedTimes: 111},
            { areaNo: '国内存储区', coordX: '2', coordY: '3', coordZ: '1', spaceNo: '2-3-1', state: 1 ,usedTimes: 112},
            { areaNo: '国内存储区', coordX: '3', coordY: '3', coordZ: '1', spaceNo: '3-3-1', state: 1 ,usedTimes: 113},
            { areaNo: '国内存储区', coordX: '4', coordY: '3', coordZ: '1', spaceNo: '4-3-1', state: 1 ,usedTimes: 114},
            { areaNo: '国内存储区', coordX: '5', coordY: '3', coordZ: '1', spaceNo: '5-3-1', state: 1 ,usedTimes: 115},
            { areaNo: '国内存储区', coordX: '6', coordY: '3', coordZ: '1', spaceNo: '6-3-1', state: 1 ,usedTimes: 116},
            { areaNo: '国内存储区', coordX: '7', coordY: '3', coordZ: '1', spaceNo: '7-3-1', state: 1 ,usedTimes: 117},
            { areaNo: '国内存储区', coordX: '8', coordY: '3', coordZ: '1', spaceNo: '8-3-1', state: 1 ,usedTimes: 118},
            { areaNo: '国内存储区', coordX: '10', coordY: '3', coordZ: '1', spaceNo: '10-3-1',state: 1,usedTimes: 119 },
            { areaNo: '国内存储区', coordX: '1', coordY: '3', coordZ: '1', spaceNo: '1-3-2', state: 1 ,usedTimes: 131},
            { areaNo: '国内存储区', coordX: '2', coordY: '3', coordZ: '1', spaceNo: '2-3-2', state: 1 ,usedTimes: 132},
            { areaNo: '国内存储区', coordX: '3', coordY: '3', coordZ: '1', spaceNo: '3-3-2', state: 1 ,usedTimes: 133},
            { areaNo: '国内存储区', coordX: '4', coordY: '3', coordZ: '1', spaceNo: '4-3-2', state: 1 ,usedTimes: 134},
            { areaNo: '国内存储区', coordX: '5', coordY: '3', coordZ: '1', spaceNo: '5-3-2', state: 1 ,usedTimes: 135},
            { areaNo: '国内存储区', coordX: '6', coordY: '3', coordZ: '1', spaceNo: '6-3-2', state: 1 ,usedTimes: 136},
            { areaNo: '国内存储区', coordX: '7', coordY: '3', coordZ: '1', spaceNo: '7-3-2', state: 1 ,usedTimes: 137},
            { areaNo: '国内存储区', coordX: '8', coordY: '3', coordZ: '1', spaceNo: '8-3-2', state: 1 ,usedTimes: 138},
            { areaNo: '国内存储区', coordX: '10', coordY: '3', coordZ: '1', spaceNo: '10-3-2',state: 1,usedTimes: 139 },
            { areaNo: '国内存储区', coordX: '1', coordY: '1', coordZ: '2', spaceNo: '1-1-2', state: 1 ,usedTimes: 161},
            { areaNo: '国内存储区', coordX: '2', coordY: '1', coordZ: '2', spaceNo: '2-1-2', state: 1 ,usedTimes: 162},
            { areaNo: '国内存储区', coordX: '3', coordY: '1', coordZ: '2', spaceNo: '3-1-2', state: 1 ,usedTimes: 163},
            { areaNo: '国内存储区', coordX: '4', coordY: '1', coordZ: '2', spaceNo: '4-1-2', state: 1 ,usedTimes: 164},
            { areaNo: '国内存储区', coordX: '5', coordY: '1', coordZ: '2', spaceNo: '5-1-2', state: 1 ,usedTimes: 165},
            { areaNo: '国内存储区', coordX: '6', coordY: '1', coordZ: '2', spaceNo: '6-1-2', state: 1 ,usedTimes: 166},
            { areaNo: '国内存储区', coordX: '7', coordY: '1', coordZ: '2', spaceNo: '7-1-2', state: 1 ,usedTimes: 167},
            { areaNo: '国内存储区', coordX: '8', coordY: '1', coordZ: '2', spaceNo: '8-1-2', state: 1 ,usedTimes: 168},
            { areaNo: '国内存储区', coordX: '9', coordY: '1', coordZ: '2', spaceNo: '9-1-2', state: 1 ,usedTimes: 169},
            { areaNo: '国内存储区', coordX: '1', coordY: '2', coordZ: '2', spaceNo: '1-2-2', state: 1 , usedTimes: 181},
            { areaNo: '国内存储区', coordX: '2', coordY: '2', coordZ: '2', spaceNo: '2-2-2', state: 1 , usedTimes: 182},
            { areaNo: '国内存储区', coordX: '3', coordY: '2', coordZ: '2', spaceNo: '3-2-2', state: 1 , usedTimes: 183},
            { areaNo: '国内存储区', coordX: '4', coordY: '2', coordZ: '2', spaceNo: '4-2-2', state: 1 , usedTimes: 184},
            { areaNo: '国内存储区', coordX: '5', coordY: '2', coordZ: '2', spaceNo: '5-2-2', state: 1 , usedTimes: 185},
            { areaNo: '国内存储区', coordX: '6', coordY: '2', coordZ: '2', spaceNo: '6-2-2', state: 1 , usedTimes: 186},
            { areaNo: '国内存储区', coordX: '7', coordY: '2', coordZ: '2', spaceNo: '7-2-2', state: 1 , usedTimes: 187},
            { areaNo: '国内存储区', coordX: '8', coordY: '2', coordZ: '2', spaceNo: '8-2-2', state: 1 , usedTimes: 188},
            { areaNo: '国内存储区', coordX: '1', coordY: '3', coordZ: '2', spaceNo: '1-3-2', state: 1 , usedTimes: 201},
            { areaNo: '国内存储区', coordX: '2', coordY: '3', coordZ: '2', spaceNo: '2-3-2', state: 1 , usedTimes: 202},
            { areaNo: '国内存储区', coordX: '3', coordY: '3', coordZ: '2', spaceNo: '3-3-2', state: 1 , usedTimes: 203},
            { areaNo: '国内存储区', coordX: '4', coordY: '3', coordZ: '2', spaceNo: '4-3-2', state: 1 , usedTimes: 1204},
            { areaNo: '国内存储区', coordX: '5', coordY: '3', coordZ: '2', spaceNo: '5-3-2', state: 1 , usedTimes: 1205},
            { areaNo: '国内存储区', coordX: '6', coordY: '3', coordZ: '2', spaceNo: '6-3-2', state: 1 , usedTimes: 1206},
            { areaNo: '国内存储区', coordX: '7', coordY: '3', coordZ: '2', spaceNo: '7-3-2', state: 1 , usedTimes: 1207},
            { areaNo: '国内存储区', coordX: '8', coordY: '3', coordZ: '2', spaceNo: '8-3-2', state: 1 , usedTimes: 1208},
            { areaNo: '国内存储区', coordX: '1', coordY: '4', coordZ: '2', spaceNo: '1-4-2', state: 1 , usedTimes: 1201},
            { areaNo: '国内存储区', coordX: '2', coordY: '4', coordZ: '2', spaceNo: '2-4-2', state: 1 , usedTimes: 1202},
            { areaNo: '国内存储区', coordX: '3', coordY: '4', coordZ: '2', spaceNo: '3-4-2', state: 1 , usedTimes: 1223},
            { areaNo: '国内存储区', coordX: '4', coordY: '4', coordZ: '2', spaceNo: '4-4-2', state: 1 , usedTimes: 1224},
            { areaNo: '国内存储区', coordX: '5', coordY: '4', coordZ: '2', spaceNo: '5-4-2', state: 1 , usedTimes: 1225},
            { areaNo: '国内存储区', coordX: '6', coordY: '4', coordZ: '2', spaceNo: '6-4-2', state: 1 , usedTimes: 1226},
            { areaNo: '国内存储区', coordX: '7', coordY: '4', coordZ: '2', spaceNo: '7-4-2', state: 1 , usedTimes: 227},
            { areaNo: '国内存储区', coordX: '8', coordY: '4', coordZ: '2', spaceNo: '8-4-2', state: 1 , usedTimes: 228},
        ];
        //             （Z排-Y层-X列）
		// 货架数据定义（X列-Y排-Z层） status:1存在 0不存在
		const coord = { x: 20, y: 10, z: 3 };
        let racks = [];
        (function initracks() {
            for(let z=1; z<=coord.z; z++) {
                for(let y=1; y<=coord.y; y++) {
                    for(let x=1; x<=coord.x; x++) {
                        racks.push({
                            coordinate: `${x}-${y}-${z}`,
                            coordinateX: x,
                            coordinateY: y,
                            coordinateZ: z,
                            status: warehouses.find(w => w.spaceNo === `${x}-${y}-${z}`) ? 1 : 0
                        });
                    }
                }
            }
        })();
		
		// 获取当前时间 HH:MM:SS 格式
		function getCurrentTime() {
			const now = new Date();
			return now.toTimeString().substr(0, 8);
		}
		
		
		let isSearchActive = false;
		function searchEvent(){
			$(document).keydown(function(e) {
				if(e.ctrlKey && e.key === 'f') {
					$('.search-toggle').click();
					return false;
				}
			});
			// 搜索功能事件处理
			$('.search-toggle').click(function() {
				const searchBox = $('.search-box');
				if(isSearchActive) {
					// 关闭搜索
					searchBox.removeClass('active').val('');
					$('.rack').removeClass('highlight-match');
				} else {
					// 打开搜索
					searchBox.addClass('active').focus();
				}
				isSearchActive = !isSearchActive;
			});

			$('.search-box').on('keydown', function(e) {
				if(e.key === 'Enter') {
					const keyword = $(this).val().trim();
					if(keyword) {
						// 移除旧的高亮
						$('.highlight-match').removeClass('highlight-match');
						
						// 模糊搜索并添加高亮
						$(`[data-goodsno*="${keyword}"]`).each(function() {
							$(this).addClass('highlight-match')
								   .closest('.rack-group').prev('.group-title').addClass('highlight-match');
						});
						const count = $('.highlight-match').length;
						const coordinates = $('.highlight-match')
							.map(function() {
								return $(this).attr('data-coordinate');
							}).get().join(',');
						if(count===0) alert('没有查询到符合条件的数据！');
						else alert('找到'+count+'个结果,坐标为：' + coordinates);
					} else {
						$('.highlight-match').removeClass('highlight-match');
					}
				}
			});
		}
		function fullscreenEvent(){
			// 全屏功能实现
			$(document).on('click', '.fullscreen-toggle', function() {
				if (!document.fullscreenElement) {
					document.documentElement.requestFullscreen().then(() => {
						$('.fullscreen-toggle')
							.removeClass('fa-expand')
							.addClass('fa-compress')
							.attr('title', '退出全屏');
					});
				} else {
					document.exitFullscreen().then(() => {
						$('.fullscreen-toggle')
							.removeClass('fa-compress')
							.addClass('fa-expand')
							.attr('title', '进入全屏');
					});
				}
			});
			// 监听全屏状态变化
			document.addEventListener('fullscreenchange', function() {
				if (!document.fullscreenElement) {
					$('.fullscreen-toggle')
						.removeClass('fa-compress')
						.addClass('fa-expand')
						.attr('title', '进入全屏');
				}
			});
		}
		// 初始化视图切换
        $(function() {
			$('#warehouseDisplay').on('click', '.view-title .fas', function() {
				$(this).closest('.view-title').next('.view-container').slideToggle(300);
				$(this).toggleClass('fa-caret-right fa-caret-down');
			});
			$('#storageSelect').on('change', function() {
                // 变化事件函数留空
            });			
			searchEvent();
			fullscreenEvent();
			
			const percentage = (summary.used / summary.total * 100).toFixed(0);
            $('.summary-stats').text(`${summary.used}/${summary.total}`);
            $('.progress-fill').css('width', `${percentage}%`);
            $('.progress-text').text(`${percentage}%`);
			if(percentage==100) $('.progress-fill').addClass("progress-fill-100");
			else if(percentage>=80 && percentage<100) $('.progress-fill').addClass("progress-fill-80");
		
            $('.view-btn').click(function() {
                $('.view-btn').removeClass('active');
                $(this).addClass('active');
                updateFilter();
            });
            
            updateFilter();
        });

        function getViewMode() {
            return $('.view-btn.active').data('mode');
        }
		

        function updateFilter() {
			const viewMode = getViewMode();
            const options = Array.from({length: viewMode === 'layer' ? coord.z : coord.y}, (_,i) => {
                const value = viewMode === 'layer' ? coord.z-i : coord.y-i;
                const label = viewMode === 'layer' ? `${value}层` : `${value}排`;
                return `<option value="${value}">${label}</option>`;
            }).join('');
            
            $('#filterContainer').html(`
                ${viewMode === 'layer' ? '按层查看' : '按排查看'}
                <select id="paramSelect">
					<option value="0">全部</option>
					${options}
				</select>
            `);
            
            $('#paramSelect').on('change', updateDisplay);
            updateDisplay();
        }

        function updateDisplay() {
            const viewMode = getViewMode();
            const paramSelect = $('#paramSelect').val() || 1;
            $('#warehouseDisplay').empty();
			
			if(paramSelect==0){
				const params = viewMode === 'layer' ? coord.z : coord.y;
				for(let i=params;i>0;i--){
					var param = i;
					const label = viewMode === 'layer' ? `层` : `排`;
					$('#warehouseDisplay').append("<div class='view-title'><i class='fas fa-caret-down'></i>"+param+label+"</div>");
					updateDisplay2(param);
				}
			}else{
				updateDisplay2(paramSelect);
			}
			updateState();//更新库位状态
        }
		function updateDisplay2(param) {
            const viewMode = getViewMode();
            // 筛选数据
            const filtered = racks.filter(item => 
                viewMode === 'layer' ? item.coordinateZ == param : item.coordinateY == param
            );

            // 分组处理
            const groups = {};
            filtered.forEach(item => {
                const groupKey = viewMode === 'layer' ? item.coordinateY : item.coordinateZ;
                groups[groupKey] = groups[groupKey] || [];
                groups[groupKey].push(item);
            });

            // 创建视图
            const viewContainer = $('<div>').addClass('view-container');
            
            Object.keys(groups).sort((a,b) => b - a).forEach(groupKey => {
                const groupDiv = $('<div>').addClass('rack-group');
                
                // 组标题
                $('<div>')
                    .addClass('group-title')
                    .text(viewMode === 'layer' ? `${groupKey}排` : `${groupKey}层`)
                    .appendTo(groupDiv);

                // 库位行
                const rowDiv = $('<div>').addClass('row');
                
                groups[groupKey]
                    .sort((a,b) => a.coordinateX - b.coordinateX)
                    .forEach(item => {
                        const $rack = $('<div>')
								.addClass(`rack ${item.status ? 'exists' : ''}`)
								.attr('data-coordinate',`${item.coordinate}`);
						if(!item.status){
							$rack.attr('title', 
								`货架坐标：${item.coordinate}\n` +
								`货架状态：${item.status ? '库位' : '无库位'}`
							);
						}
						$rack.appendTo(rowDiv);
                    });
                
                groupDiv.append(rowDiv);
                viewContainer.append(groupDiv);
            });

            $('#warehouseDisplay').append(viewContainer);
        }
		
		// 更新库位状态
		function updateState(){
			$('.view-container .rack.exists').each(function(index,element){
				//console.log($(element).attr('data-coordinate'));
				var deviceState="状态：未知";
				var spaceNo = $(element).attr('data-coordinate');
				const ws = warehouseStates.find(w => w.spaceNo === spaceNo);
				if(ws){
					$(element).removeClass("free occupied");
					if(ws.deviceState ==="Normal"){
						$(element).addClass("free");
					}else{
						$(element).addClass("occupied");
					}
					deviceState =ws.deviceState ==="Normal" ? '正常' : '禁用';
				}else{
					// 未知状态
				}
				
				// 查找匹配的货物信息
				const goods = goodsData.find(g => g.spaceNo === spaceNo);
				var goodsTips="";
				var goodsTitle="";
				if(goods){
					//货物图标
					var goods_icon="fa-briefcase";
					if(goods.goodsType ==="pallet") goods_icon="fa-box";
					//货物状态
					var goods_state_class="";
					var goods_state_title="";
					if(goods.state ==="storing") {
						goods_state_class="storing";
						goods_state_title="已分配";
					} else if(goods.state ==="stored") {
						goods_state_class="stored";
						goods_state_title="已存储";
					} else{
						goods_state_title=goods.state;
					}
					var goods_type_state_title = (goods.goodsType ==="pallet"?"空框,":"行李,") +goods_state_title;
					var goods_state_run_class="";
					var goods_state_run_title="";
					// TODO
					if(goods.state ==="storing") {
						goods_state_run_class="runstate-icon-totime";
						goods_state_run_title="即将释放";
					} else if(goods.state ==="stored") {
						goods_state_run_class="runstate-icon-ontime";
						goods_state_run_title="已到释放时间";
					} else if(goods.state ==="releasing") {
						goods_state_run_class="runstate-icon-overtime";
						goods_state_run_title="超时未释放";
					}
					
					
					//有货物不显示列号
					$(element).text('').attr('data-goodsno',`${goods.goodsNo}`);
					
					goodsTitle ='<div class="tooltip-title">货物'+
									'<i class="goods-icon fas '+ goods_icon +' '+goods_state_class+'" title ="'+goods_type_state_title+'"></i>'+
								'</div>';
					goodsTips = '<div class="tooltip-item">'+goods.goodsNo+'</div>' + 
								'<div class="tooltip-item">'+goods_state_title+
								' <i class="fas fa-circle '+goods_state_run_class+'" title ="'+goods_state_run_title+'"></i>'+
								'</div>';
				}else{
					goodsTitle ='<div class="tooltip-title">货物</div>';
					goodsTips = '<div class="tooltip-item">无</div>';
				}
				$(element).append(
				'  <div class="custom-tooltip">' + 
				'	<div class="tooltip-content">' + 
				'	  <div class="tooltip-column">' + 
						goodsTitle + goodsTips +
				'	  </div>' + 
				'	  <div class="tooltip-divider"></div>' + 
				'	  <div class="tooltip-column" style="text-align:right">' + 
				'		<div class="tooltip-title">库位</div>' + 
				'		<div class="tooltip-item">'+spaceNo+'</div>' + 
				'		<div class="tooltip-item">'+deviceState+'</div>' + 
				'	  </div>' + 
				'	</div>' + 
				'	<div class="tooltip-content-opt">' + 
				'	  <div class="tooltip-column">' + 
						goodsTitle + goodsTips +
				'	  </div>' + 
				'	  <div class="tooltip-divider"></div>' + 
				'	  <div class="tooltip-column" style="text-align:right" title="1231321312">' + 
				'		<div class="tooltip-title" title="库位">库位</div>' + 
				'		<div class="tooltip-item">'+spaceNo+'</div>' + 
				'		<div class="tooltip-item">'+deviceState+'</div>' + 
				'	  </div>' + 
				'	</div>' + 
				'  </div>'
				)
			});
		}
    </script>
</body>
</html>